<template>
  <div>
    <div class="margin-container-list">
      <div class="tab-style-default">
        <el-tabs v-model="auditType" @tab-click="handleClick">
          <el-tab-pane :label="examineName" name="0"></el-tab-pane>
          <el-tab-pane :label="passName" name="1"></el-tab-pane>
          <el-tab-pane :label="noPassName" name="2"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="top-operate">
        <div class="search-item">
          <el-input @keyup.enter.native="handleSearch" v-model="entityListQuery.title" placeholder="商品名称" style="width: 300px"></el-input>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="entityList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column width="90px" label="排序" prop="sortNo"></el-table-column>
          <el-table-column min-width="280px" label="商品">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.mainImage" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div v-if="scope.row.title.length <= 20">{{scope.row.title}}</div>
                  <div v-if="scope.row.title.length > 20">{{scope.row.title.slice(0,20) + '...'}}</div>
                  <template v-if="scope.row.categoryName">
                    <span class="category-style">[{{scope.row.categoryName}}]</span><br/>
                    <el-tag size="mini" v-if="scope.row.skuFlag == 1" effect="light">多规格</el-tag>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <template v-if="getVersionType() == '2'">
            <el-table-column width="240px" label="原供应价" >
              <template slot-scope="scope">
                <template v-if="scope.row.skuFlag == 0">
                  {{ scope.row.oldSupplyPrice }}
                </template>
                <template v-else>
                  <el-button type="text" size="medium" @click="initAuditGoodsSku(scope.row)">查看</el-button>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="新供应价" width="240px">
              <template slot-scope="scope">
                <template v-if="scope.row.skuFlag == 0">
                  {{ scope.row.supplyPrice }}
                </template>
                <template v-else>
                  <el-button type="text" size="medium" @click="initAuditGoodsSku(scope.row)">查看</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column label="原销售库" width="240px">
              <template slot-scope="scope">
                {{dict.distributionType[scope.row.oldDistributionType]}}
              </template>
            </el-table-column>
            <el-table-column label="新销售库" width="240px">
              <template slot-scope="scope">
                {{dict.distributionType[scope.row.distributionType]}}
              </template>
            </el-table-column>
          </template>

          <el-table-column label="状态" width="240px">
            <template slot-scope="scope">
              <span v-if="scope.row.auditType === 0">{{dict.auditType[scope.row.auditType]}}</span>
              <span type="success" v-if="scope.row.auditType === 1">{{dict.auditType[scope.row.auditType]}}</span>
              <span type="danger" v-if="scope.row.auditType === 2">{{dict.auditType[scope.row.auditType]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="拒绝原因" prop="remark" v-if="auditType === '2'"></el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="entityListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="entityListQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!--多规格商品-->
      <el-dialog title="" :visible.sync="goodsLayer" :close-on-press-escape="true" width="850px">
        <div class="goods-layer pad-l-20 pad-r-20 pad-b-20">
          <h3>多规格商品</h3>
          <div class="flex v-align-c cursor-p">
            <label><img :src="goodsInfo.mainImage" class="picture-avatar"></label>
            <div class="font-14 pad-l-10">
              <div class="title-line-2 font-14 width-300">{{goodsInfo.title}}</div>
              <template>
                <div>
                  <span class="category-style">{{goodsInfo.categoryName}}</span>
                  <el-tag class="mar-l-10" size="mini" effect="light" v-if="goodsInfo.skuFlag == 1">多规格</el-tag>
                </div>
              </template>
            </div>
          </div>

          <div class="table-container pad-t-20 pad-b-20" v-loading="skuLoading" style="min-height: 100px;">
            <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--medium el-table--scrollable-x">
              <div class="el-table__body-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                  <thead class="el-table__header">
                  <tr>
                    <th><div class="cell text-align-c">SKU</div></th>
                    <th width="145"><div class="cell text-align-c">原供应价</div></th>
                    <th width="145"><div class="cell text-align-c">新供应价</div></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item, index) in skuList" :key="index">
                    <td><div class="cell text-align-c">{{ item.skuDetail }}</div></td>
                    <td><div class="cell text-align-c">{{ item.oldSupplyPrice }}</div></td>
                    <td><div class="cell text-align-c">{{ item.supplyPrice }}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="height-36"></div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="goodsLayer = false">关闭</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { pageAuditGoods, countAuditGoods, getAuditGoodsById } from '@/api/goods/auditGoods'
  export default {
    data() {
      return {
        auditType: '0',
        examineName: '审核中',
        passName: '已通过',
        noPassName: '未通过',
        entity: {
          examineNum: 0,
          passNum: 0,
          noPassNum: 0
        },
        entityList: [],
        total: null,
        dict: {},
        entityListQuery: {
          currentPage: 1,
          size: 10,
          title: '',
          enterpriseId: this.getEnterpriseId()
        },
        listLoading: false,
        skuLoading: false,
        goodsLayer: false,
        skuList: [],
        goodsInfo: {}
      }
    },
    created() {
      this.initCount()
      this.initPage()
    },
    methods: {
      handleClick() {
        this.entityListQuery.title = ''
        this.initCount()
        this.initPage()
      },
      handleSearch() {
        this.initCount()
        this.initPage()
      },
      handleReset() {
        this.entityListQuery.title = ''
        this.initCount()
        this.initPage()
      },
      initCount() {
        countAuditGoods(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.entity = response.data
          this.examineName = '审核中' + '(' + this.entity.examineNum + ')'
          this.passName = '已通过' + '(' + this.entity.passNum + ')'
          this.noPassName = '未通过' + '(' + this.entity.noPassNum + ')'
        })
      },
      initAuditGoodsSku(row) {
        this.goodsInfo = row
        this.skuLoading = true
        getAuditGoodsById(row.auditGoodsId).then(response => {
          if (response.isError) return
          this.skuList = response.data.qualityTable
          this.goodsLayer = true
          this.skuLoading = false
        })
      },
      initPage() {
        this.listLoading = true
        this.entityListQuery.auditType = this.auditType
        pageAuditGoods(this.entityListQuery).then(response => {
          if (response.isError) return
          this.entityList = response.data.records
          this.total = response.data.total
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.entityListQuery.currentPage = val
        this.initPage()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.entityListQuery.size = val
        this.initPage()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
</script>

<style>
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>